TypeScript์ 'satisfies' ์ฐ์ฐ์์ ๋ํ ์ฌ์ธต ๋ถ์. ๊ธฐ๋ฅ, ์ฌ์ฉ ์ฌ๋ก, ๊ทธ๋ฆฌ๊ณ ์ ๋ฐํ ํ์ ์ ์ฝ ๊ฒ์ฌ๋ฅผ ์ํ ๊ธฐ์กด ํ์ ์ฃผ์ ๋๋น ์ด์ ์ ์ดํด๋ด ๋๋ค.
TypeScript์ 'satisfies' ์ฐ์ฐ์: ์ ๋ฐํ ํ์ ์ ์ฝ ๊ฒ์ฌ ํ์ฉํ๊ธฐ
JavaScript์ ์์ ์งํฉ์ธ TypeScript๋ ์ ์ ํ์ดํ์ ์ ๊ณตํ์ฌ ์ฝ๋ ํ์ง๊ณผ ์ ์ง๋ณด์์ฑ์ ํฅ์์ํต๋๋ค. ์ด ์ธ์ด๋ ๊ฐ๋ฐ์ ๊ฒฝํ๊ณผ ํ์
์์ ์ฑ์ ๊ฐ์ ํ๊ธฐ ์ํ ์๋ก์ด ๊ธฐ๋ฅ๋ค์ ๋์
ํ๋ฉฐ ์ง์์ ์ผ๋ก ๋ฐ์ ํ๊ณ ์์ต๋๋ค. ๊ทธ์ค ํ๋๊ฐ TypeScript 4.9์ ๋์
๋ satisfies
์ฐ์ฐ์์
๋๋ค. ์ด ์ฐ์ฐ์๋ ํ์
์ ์ฝ ๊ฒ์ฌ์ ๋ํ ๋
ํนํ ์ ๊ทผ ๋ฐฉ์์ ์ ๊ณตํ์ฌ, ๊ฐ๋ฐ์๊ฐ ๊ฐ์ ํ์
์ถ๋ก ์ ์ํฅ์ ์ฃผ์ง ์์ผ๋ฉด์ ํน์ ํ์
์ ์ค์ํ๋์ง ํ์ธํ ์ ์๊ฒ ํด์ค๋๋ค. ์ด ๋ธ๋ก๊ทธ ํฌ์คํธ์์๋ satisfies
์ฐ์ฐ์์ ๋ณต์ก์ฑ์ ๊น์ด ํ๊ณ ๋ค์ด ๊ทธ ๊ธฐ๋ฅ, ์ฌ์ฉ ์ฌ๋ก, ๊ทธ๋ฆฌ๊ณ ๊ธฐ์กด ํ์
์ฃผ์์ ๋นํด ๊ฐ๋ ์ด์ ์ ํ๊ตฌํฉ๋๋ค.
TypeScript์ ํ์ ์ ์ฝ ์ดํดํ๊ธฐ
ํ์ ์ ์ฝ์ TypeScript ํ์ ์์คํ ์ ๊ธฐ๋ณธ์ ๋๋ค. ์ด๋ฅผ ํตํด ๊ฐ์ ์์๋๋ ํํ๋ฅผ ์ง์ ํ์ฌ ํน์ ๊ท์น์ ์ค์ํ๋๋ก ๋ณด์ฅํ ์ ์์ต๋๋ค. ์ด๋ ๊ฐ๋ฐ ๊ณผ์ ์ด๊ธฐ์ ์ค๋ฅ๋ฅผ ๋ฐ๊ฒฌํ๊ณ , ๋ฐํ์ ๋ฌธ์ ๋ฅผ ์๋ฐฉํ๋ฉฐ, ์ฝ๋์ ์ ๋ขฐ์ฑ์ ํฅ์์ํค๋ ๋ฐ ๋์์ด ๋ฉ๋๋ค.
์ ํต์ ์ผ๋ก TypeScript๋ ํ์ ์ฃผ์๊ณผ ํ์ ๋จ์ธ์ ์ฌ์ฉํ์ฌ ํ์ ์ ์ฝ์ ๊ฐ์ ํฉ๋๋ค. ํ์ ์ฃผ์์ ๋ณ์์ ํ์ ์ ๋ช ์์ ์ผ๋ก ์ ์ธํ๋ ๋ฐ๋ฉด, ํ์ ๋จ์ธ์ ์ปดํ์ผ๋ฌ์๊ฒ ๊ฐ์ ํน์ ํ์ ์ผ๋ก ์ทจ๊ธํ๋๋ก ์ง์ํฉ๋๋ค.
์๋ฅผ ๋ค์ด, ๋ค์ ์์ ๋ฅผ ์ดํด๋ณด๊ฒ ์ต๋๋ค.
interface Product {
name: string;
price: number;
discount?: number;
}
const product: Product = {
name: "Laptop",
price: 1200,
discount: 0.1, // 10% ํ ์ธ
};
console.log(`Product: ${product.name}, Price: ${product.price}, Discount: ${product.discount}`);
์ด ์์ ์์ product
๋ณ์๋ Product
ํ์
์ผ๋ก ์ฃผ์ ์ฒ๋ฆฌ๋์ด ์ง์ ๋ ์ธํฐํ์ด์ค๋ฅผ ์ค์ํจ์ ๋ณด์ฅํฉ๋๋ค. ๊ทธ๋ฌ๋ ๊ธฐ์กด์ ํ์
์ฃผ์์ ์ฌ์ฉํ๋ฉด ๋๋๋ก ๋ ์ ๋ฐํ ํ์
์ถ๋ก ์ผ๋ก ์ด์ด์ง ์ ์์ต๋๋ค.
satisfies
์ฐ์ฐ์ ์๊ฐ
satisfies
์ฐ์ฐ์๋ ํ์
์ ์ฝ ๊ฒ์ฌ์ ๋ํด ๋ ๋ฏธ๋ฌํ ์ ๊ทผ ๋ฐฉ์์ ์ ๊ณตํฉ๋๋ค. ์ถ๋ก ๋ ํ์
์ ํ์ฅ(widening)ํ์ง ์์ผ๋ฉด์ ๊ฐ์ด ํ์
์ ์ค์ํ๋์ง ํ์ธํ ์ ์๊ฒ ํด์ค๋๋ค. ์ด๋ ๊ฐ์ ํน์ ํ์
์ ๋ณด๋ฅผ ๋ณด์กดํ๋ฉด์ ํ์
์์ ์ฑ์ ๋ณด์ฅํ ์ ์๋ค๋ ๊ฒ์ ์๋ฏธํฉ๋๋ค.
satisfies
์ฐ์ฐ์๋ฅผ ์ฌ์ฉํ๋ ๊ตฌ๋ฌธ์ ๋ค์๊ณผ ๊ฐ์ต๋๋ค.
const myVariable = { ... } satisfies MyType;
์ฌ๊ธฐ์ satisfies
์ฐ์ฐ์๋ ์ผ์ชฝ์ ๊ฐ์ด ์ค๋ฅธ์ชฝ์ ํ์
์ ์ค์ํ๋์ง ํ์ธํฉ๋๋ค. ๋ง์ฝ ๊ฐ์ด ํ์
์ ๋ง์กฑํ์ง ์์ผ๋ฉด TypeScript๋ ์ปดํ์ผ ํ์ ์ค๋ฅ๋ฅผ ๋ฐ์์ํต๋๋ค. ๊ทธ๋ฌ๋ ํ์
์ฃผ์๊ณผ ๋ฌ๋ฆฌ, myVariable
์ ์ถ๋ก ๋ ํ์
์ MyType
์ผ๋ก ํ์ฅ๋์ง ์์ต๋๋ค. ๋์ , ํฌํจ๋ ์์ฑ๊ณผ ๊ฐ์ ๊ธฐ๋ฐํ ๊ตฌ์ฒด์ ์ธ ํ์
์ ์ ์งํฉ๋๋ค.
satisfies
์ฐ์ฐ์์ ์ฌ์ฉ ์ฌ๋ก
satisfies
์ฐ์ฐ์๋ ์ ๋ฐํ ํ์
์ ๋ณด๋ฅผ ๋ณด์กดํ๋ฉด์ ํ์
์ ์ฝ์ ๊ฐ์ ํ๊ณ ์ถ์ ๋ ํนํ ์ ์ฉํฉ๋๋ค. ๋ค์์ ๋ช ๊ฐ์ง ์ผ๋ฐ์ ์ธ ์ฌ์ฉ ์ฌ๋ก์
๋๋ค.
1. ๊ฐ์ฒด ํํ ๊ฒ์ฆ
๋ณต์กํ ๊ฐ์ฒด ๊ตฌ์กฐ๋ฅผ ๋ค๋ฃฐ ๋, satisfies
์ฐ์ฐ์๋ฅผ ์ฌ์ฉํ์ฌ ๊ฐ์ฒด์ ๊ฐ๋ณ ์์ฑ์ ๋ํ ์ ๋ณด๋ฅผ ์์ง ์์ผ๋ฉด์ ํน์ ํํ๋ฅผ ์ค์ํ๋์ง ๊ฒ์ฆํ ์ ์์ต๋๋ค.
interface Configuration {
apiUrl: string;
timeout: number;
features: {
darkMode: boolean;
analytics: boolean;
};
}
const defaultConfig = {
apiUrl: "https://api.example.com",
timeout: 5000,
features: {
darkMode: false,
analytics: true,
},
} satisfies Configuration;
// ์ถ๋ก ๋ ํ์
์ผ๋ก ํน์ ์์ฑ์ ์ฌ์ ํ ์ ๊ทผํ ์ ์์ต๋๋ค:
console.log(defaultConfig.apiUrl); // string
console.log(defaultConfig.features.darkMode); // boolean
์ด ์์ ์์ defaultConfig
๊ฐ์ฒด๋ Configuration
์ธํฐํ์ด์ค์ ๋ํด ๊ฒ์ฌ๋ฉ๋๋ค. satisfies
์ฐ์ฐ์๋ defaultConfig
๊ฐ ํ์ํ ์์ฑ๊ณผ ํ์
์ ๊ฐ์ง๊ณ ์๋์ง ํ์ธํฉ๋๋ค. ๊ทธ๋ฌ๋ defaultConfig
์ ํ์
์ ํ์ฅํ์ง ์์ผ๋ฏ๋ก, ์ถ๋ก ๋ ํน์ ํ์
(์: defaultConfig.apiUrl
์ ์ฌ์ ํ string์ผ๋ก ์ถ๋ก ๋จ)์ผ๋ก ์์ฑ์ ์ ๊ทผํ ์ ์์ต๋๋ค.
2. ํจ์ ๋ฐํ ๊ฐ์ ํ์ ์ ์ฝ ์ ์ฉ
satisfies
์ฐ์ฐ์๋ ํจ์ ๋ฐํ ๊ฐ์ ํ์
์ ์ฝ์ ์ ์ฉํ๋ ๋ฐ์๋ ์ฌ์ฉ๋ ์ ์์ผ๋ฉฐ, ํจ์ ๋ด์ ํ์
์ถ๋ก ์ ์ํฅ์ ์ฃผ์ง ์์ผ๋ฉด์ ๋ฐํ๋ ๊ฐ์ด ํน์ ํ์
์ ์ค์ํ๋๋ก ๋ณด์ฅํฉ๋๋ค.
interface ApiResponse {
success: boolean;
data?: any;
error?: string;
}
function fetchData(url: string): any {
// API์์ ๋ฐ์ดํฐ ๊ฐ์ ธ์ค๊ธฐ ์๋ฎฌ๋ ์ด์
const data = {
success: true,
data: { items: ["item1", "item2"] },
};
return data satisfies ApiResponse;
}
const response = fetchData("/api/data");
if (response.success) {
console.log("Data fetched successfully:", response.data);
}
์ฌ๊ธฐ์ fetchData
ํจ์๋ satisfies
์ฐ์ฐ์๋ฅผ ์ฌ์ฉํ์ฌ ApiResponse
์ธํฐํ์ด์ค์ ๋ํด ๊ฒ์ฌ๋๋ ๊ฐ์ ๋ฐํํฉ๋๋ค. ์ด๋ ๋ฐํ๋ ๊ฐ์ด ํ์ํ ์์ฑ(success
, data
, error
)์ ๊ฐ๋๋ก ๋ณด์ฅํ์ง๋ง, ํจ์๊ฐ ๋ด๋ถ์ ์ผ๋ก ์๊ฒฉํ๊ฒ ApiResponse
ํ์
์ ๊ฐ์ ๋ฐํํ๋๋ก ๊ฐ์ ํ์ง๋ ์์ต๋๋ค.
3. ๋งคํ๋ ํ์ ๋ฐ ์ ํธ๋ฆฌํฐ ํ์ ๊ณผ ํจ๊ป ์ฌ์ฉํ๊ธฐ
satisfies
์ฐ์ฐ์๋ ๋งคํ๋ ํ์
๋ฐ ์ ํธ๋ฆฌํฐ ํ์
๊ณผ ํจ๊ป ์์
ํ ๋ ํนํ ์ ์ฉํฉ๋๋ค. ์ด ๊ฒฝ์ฐ, ๊ฒฐ๊ณผ ๊ฐ์ด ํน์ ์ ์ฝ์ ๊ณ์ ์ค์ํ๋๋ก ๋ณด์ฅํ๋ฉด์ ํ์
์ ๋ณํํ๊ณ ์ ํ ๋ ์ฌ์ฉ๋ฉ๋๋ค.
interface User {
id: number;
name: string;
email: string;
}
// ์ผ๋ถ ์์ฑ์ ์ ํ์ ์ผ๋ก ๋ง๋ฆ
type OptionalUser = Partial;
const partialUser = {
name: "John Doe",
} satisfies OptionalUser;
console.log(partialUser.name);
์ด ์์ ์์ OptionalUser
ํ์
์ Partial
์ ํธ๋ฆฌํฐ ํ์
์ ์ฌ์ฉํ์ฌ ์์ฑ๋์์ผ๋ฉฐ, User
์ธํฐํ์ด์ค์ ๋ชจ๋ ์์ฑ์ ์ ํ์ ์ผ๋ก ๋ง๋ญ๋๋ค. ๊ทธ๋ฐ ๋ค์ satisfies
์ฐ์ฐ์๋ฅผ ์ฌ์ฉํ์ฌ partialUser
๊ฐ์ฒด๊ฐ name
์์ฑ๋ง ํฌํจํ๋๋ผ๋ OptionalUser
ํ์
์ ์ค์ํ๋์ง ํ์ธํฉ๋๋ค.
4. ๋ณต์กํ ๊ตฌ์กฐ์ ์ค์ ๊ฐ์ฒด ๊ฒ์ฆ
ํ๋ ์ ํ๋ฆฌ์ผ์ด์
์ ์ข
์ข
๋ณต์กํ ์ค์ ๊ฐ์ฒด์ ์์กดํฉ๋๋ค. ์ด๋ฌํ ๊ฐ์ฒด๊ฐ ํ์
์ ๋ณด๋ฅผ ์์ง ์์ผ๋ฉด์ ํน์ ์คํค๋ง๋ฅผ ์ค์ํ๋๋ก ๋ณด์ฅํ๋ ๊ฒ์ ์ด๋ ค์ธ ์ ์์ต๋๋ค. satisfies
์ฐ์ฐ์๋ ์ด ๊ณผ์ ์ ๋จ์ํํฉ๋๋ค.
interface AppConfig {
theme: 'light' | 'dark';
logging: {
level: 'debug' | 'info' | 'warn' | 'error';
destination: 'console' | 'file';
};
features: {
analyticsEnabled: boolean;
userAuthentication: {
method: 'oauth' | 'password';
oauthProvider?: string;
};
};
}
const validConfig = {
theme: 'dark',
logging: {
level: 'info',
destination: 'file'
},
features: {
analyticsEnabled: true,
userAuthentication: {
method: 'oauth',
oauthProvider: 'Google'
}
}
} satisfies AppConfig;
console.log(validConfig.features.userAuthentication.oauthProvider); // string | undefined
const invalidConfig = {
theme: 'dark',
logging: {
level: 'info',
destination: 'invalid'
},
features: {
analyticsEnabled: true,
userAuthentication: {
method: 'oauth',
oauthProvider: 'Google'
}
}
} // as AppConfig; // ์ฌ์ ํ ์ปดํ์ผ์ ๋์ง๋ง, ๋ฐํ์ ์ค๋ฅ๊ฐ ๋ฐ์ํ ์ ์์ต๋๋ค. Satisfies๋ ์ปดํ์ผ ํ์์ ์ค๋ฅ๋ฅผ ์ก์๋
๋๋ค.
// ์์์ ์ฃผ์ ์ฒ๋ฆฌ๋ as AppConfig๋ ๋์ค์ "destination"์ด ์ฌ์ฉ๋ ๊ฒฝ์ฐ ๋ฐํ์ ์ค๋ฅ๋ก ์ด์ด์ง ์ ์์ต๋๋ค. Satisfies๋ ํ์
์ค๋ฅ๋ฅผ ์กฐ๊ธฐ์ ๊ฐ์งํ์ฌ ์ด๋ฅผ ๋ฐฉ์งํฉ๋๋ค.
์ด ์์ ์์ satisfies
๋ `validConfig`๊ฐ `AppConfig` ์คํค๋ง๋ฅผ ์ค์ํจ์ ๋ณด์ฅํฉ๋๋ค. ๋ง์ฝ `logging.destination`์ด 'invalid'์ ๊ฐ์ ์ ํจํ์ง ์์ ๊ฐ์ผ๋ก ์ค์ ๋์๋ค๋ฉด, TypeScript๋ ์ปดํ์ผ ํ์ ์ค๋ฅ๋ฅผ ๋ฐ์์์ผ ์ ์ฌ์ ์ธ ๋ฐํ์ ๋ฌธ์ ๋ฅผ ์๋ฐฉํฉ๋๋ค. ์ด๋ ๋ถ์ ํํ ์ค์ ์ด ์์ธกํ ์ ์๋ ์ ํ๋ฆฌ์ผ์ด์
๋์์ผ๋ก ์ด์ด์ง ์ ์๊ธฐ ๋๋ฌธ์ ์ค์ ๊ฐ์ฒด์ ํนํ ์ค์ํฉ๋๋ค.
5. ๊ตญ์ ํ(i18n) ๋ฆฌ์์ค ๊ฒ์ฆ
๊ตญ์ ํ๋ ์ ํ๋ฆฌ์ผ์ด์
์ ๋ค๋ฅธ ์ธ์ด์ ๋ํ ๋ฒ์ญ์ ํฌํจํ๋ ๊ตฌ์กฐํ๋ ๋ฆฌ์์ค ํ์ผ์ด ํ์ํฉ๋๋ค. satisfies
์ฐ์ฐ์๋ ์ด๋ฌํ ๋ฆฌ์์ค ํ์ผ์ด ๊ณตํต ์คํค๋ง์ ๋ํด ์ ํจํ์ง ๊ฒ์ฆํ์ฌ ๋ชจ๋ ์ธ์ด์์ ์ผ๊ด์ฑ์ ๋ณด์ฅํ ์ ์์ต๋๋ค.
interface TranslationResource {
greeting: string;
farewell: string;
instruction: string;
}
const enUS = {
greeting: 'Hello',
farewell: 'Goodbye',
instruction: 'Please enter your name.'
} satisfies TranslationResource;
const frFR = {
greeting: 'Bonjour',
farewell: 'Au revoir',
instruction: 'Veuillez saisir votre nom.'
} satisfies TranslationResource;
const esES = {
greeting: 'Hola',
farewell: 'Adiรณs',
instruction: 'Por favor, introduzca su nombre.'
} satisfies TranslationResource;
// ํค๊ฐ ๋๋ฝ๋ ๊ฒฝ์ฐ๋ฅผ ์์ํด๋ณด์ธ์:
const deDE = {
greeting: 'Hallo',
farewell: 'Auf Wiedersehen',
// instruction: 'Bitte geben Sie Ihren Namen ein.' // ๋๋ฝ๋จ
} //satisfies TranslationResource; // ์ค๋ฅ ๋ฐ์: instruction ํค ๋๋ฝ
satisfies
์ฐ์ฐ์๋ ๊ฐ ์ธ์ด ๋ฆฌ์์ค ํ์ผ์ด ์ฌ๋ฐ๋ฅธ ํ์
์ผ๋ก ํ์ํ ๋ชจ๋ ํค๋ฅผ ํฌํจํ๋๋ก ๋ณด์ฅํฉ๋๋ค. ์ด๋ ๋ค๋ฅธ ๋ก์ผ์ผ์์ ๋ฒ์ญ ๋๋ฝ์ด๋ ์๋ชป๋ ๋ฐ์ดํฐ ํ์
๊ณผ ๊ฐ์ ์ค๋ฅ๋ฅผ ๋ฐฉ์งํฉ๋๋ค.
satisfies
์ฐ์ฐ์ ์ฌ์ฉ์ ์ด์
satisfies
์ฐ์ฐ์๋ ๊ธฐ์กด์ ํ์
์ฃผ์ ๋ฐ ํ์
๋จ์ธ์ ๋นํด ์ฌ๋ฌ ๊ฐ์ง ์ด์ ์ ์ ๊ณตํฉ๋๋ค:
- ์ ๋ฐํ ํ์
์ถ๋ก :
satisfies
์ฐ์ฐ์๋ ๊ฐ์ ํน์ ํ์ ์ ๋ณด๋ฅผ ๋ณด์กดํ์ฌ, ์ถ๋ก ๋ ํ์ ์ผ๋ก ์์ฑ์ ์ ๊ทผํ ์ ์๊ฒ ํฉ๋๋ค. - ํฅ์๋ ํ์ ์์ ์ฑ: ๊ฐ์ ํ์ ์ ํ์ฅํ์ง ์๊ณ ํ์ ์ ์ฝ์ ๊ฐ์ ํ์ฌ ๊ฐ๋ฐ ๊ณผ์ ์ด๊ธฐ์ ์ค๋ฅ๋ฅผ ๋ฐ๊ฒฌํ๋ ๋ฐ ๋์์ด ๋ฉ๋๋ค.
- ํฅ์๋ ์ฝ๋ ๊ฐ๋
์ฑ:
satisfies
์ฐ์ฐ์๋ ๊ฐ์ ๊ธฐ๋ณธ ํ์ ์ ๋ณ๊ฒฝํ์ง ์๊ณ ํํ๋ฅผ ๊ฒ์ฆํ๊ณ ์์์ ๋ช ํํ๊ฒ ๋ณด์ฌ์ค๋๋ค. - ๋ณด์ผ๋ฌํ๋ ์ดํธ ๊ฐ์: ๋ณต์กํ ํ์ ์ฃผ์ ๋ฐ ํ์ ๋จ์ธ์ ๋จ์ํํ์ฌ ์ฝ๋๋ฅผ ๋ ๊ฐ๊ฒฐํ๊ณ ์ฝ๊ธฐ ์ฝ๊ฒ ๋ง๋ค ์ ์์ต๋๋ค.
ํ์ ์ฃผ์ ๋ฐ ํ์ ๋จ์ธ๊ณผ์ ๋น๊ต
satisfies
์ฐ์ฐ์์ ์ด์ ์ ๋ ์ ์ดํดํ๊ธฐ ์ํด, ๊ธฐ์กด์ ํ์
์ฃผ์ ๋ฐ ํ์
๋จ์ธ๊ณผ ๋น๊ตํด ๋ณด๊ฒ ์ต๋๋ค.
ํ์ ์ฃผ์
ํ์ ์ฃผ์์ ๋ณ์์ ํ์ ์ ๋ช ์์ ์ผ๋ก ์ ์ธํฉ๋๋ค. ํ์ ์ ์ฝ์ ๊ฐ์ ํ์ง๋ง, ๋ณ์์ ์ถ๋ก ๋ ํ์ ์ ํ์ฅํ ์๋ ์์ต๋๋ค.
interface Person {
name: string;
age: number;
}
const person: Person = {
name: "Alice",
age: 30,
city: "New York", // ์ค๋ฅ: ๊ฐ์ฒด ๋ฆฌํฐ๋ด์ ์๋ ค์ง ์์ฑ๋ง ์ง์ ํ ์ ์์ต๋๋ค
};
console.log(person.name); // string
์ด ์์ ์์ person
๋ณ์๋ Person
ํ์
์ผ๋ก ์ฃผ์ ์ฒ๋ฆฌ๋์์ต๋๋ค. TypeScript๋ person
๊ฐ์ฒด๊ฐ name
๊ณผ age
์์ฑ์ ๊ฐ์ง๋๋ก ๊ฐ์ ํฉ๋๋ค. ๊ทธ๋ฌ๋ ๊ฐ์ฒด ๋ฆฌํฐ๋ด์ Person
์ธํฐํ์ด์ค์ ์ ์๋์ง ์์ ์ถ๊ฐ ์์ฑ(city
)์ด ํฌํจ๋์ด ์๊ธฐ ๋๋ฌธ์ ์ค๋ฅ๋ฅผ ํ์ํฉ๋๋ค. person์ ํ์
์ Person์ผ๋ก ํ์ฅ๋๊ณ ๋ ๊ตฌ์ฒด์ ์ธ ํ์
์ ๋ณด๋ ์์ค๋ฉ๋๋ค.
ํ์ ๋จ์ธ
ํ์ ๋จ์ธ์ ์ปดํ์ผ๋ฌ์๊ฒ ๊ฐ์ ํน์ ํ์ ์ผ๋ก ์ทจ๊ธํ๋๋ก ์ง์ํฉ๋๋ค. ์ปดํ์ผ๋ฌ์ ํ์ ์ถ๋ก ์ ์ฌ์ ์ํ๋ ๋ฐ ์ ์ฉํ ์ ์์ง๋ง, ์๋ชป ์ฌ์ฉํ๋ฉด ์ํํ ์ ์์ต๋๋ค.
interface Animal {
name: string;
sound: string;
}
const myObject = { name: "Dog", sound: "Woof" } as Animal;
console.log(myObject.sound); // string
์ด ์์ ์์ myObject
๋ Animal
ํ์
์ผ๋ก ๋จ์ธ๋ฉ๋๋ค. ๊ทธ๋ฌ๋ ๋ง์ฝ ๊ฐ์ฒด๊ฐ Animal
์ธํฐํ์ด์ค๋ฅผ ์ค์ํ์ง ์๋๋ผ๋ ์ปดํ์ผ๋ฌ๋ ์ค๋ฅ๋ฅผ ๋ฐ์์ํค์ง ์์ ์ ์ฌ์ ์ผ๋ก ๋ฐํ์ ๋ฌธ์ ๋ก ์ด์ด์ง ์ ์์ต๋๋ค. ๋ ๋์๊ฐ, ์ปดํ์ผ๋ฌ๋ฅผ ์์ผ ์๋ ์์ต๋๋ค:
interface Vehicle {
make: string;
model: string;
}
const myObject2 = { name: "Dog", sound: "Woof" } as Vehicle; // ์ปดํ์ผ๋ฌ ์ค๋ฅ ์์! ์ข์ง ์์!
console.log(myObject2.make); // ๋ฐํ์ ์ค๋ฅ ๋ฐ์ ๊ฐ๋ฅ์ฑ ๋์!
ํ์ ๋จ์ธ์ ์ ์ฉํ์ง๋ง, ํนํ ํํ๋ฅผ ๊ฒ์ฆํ์ง ์์ผ๋ฉด ์๋ชป ์ฌ์ฉ๋ ๊ฒฝ์ฐ ์ํํ ์ ์์ต๋๋ค. satisfies์ ์ด์ ์ ์ปดํ์ผ๋ฌ๊ฐ ์ผ์ชฝ์ด ์ค๋ฅธ์ชฝ์ ํ์ ์ ๋ง์กฑํ๋์ง ํ์ธํ๋ค๋ ๊ฒ์ ๋๋ค. ๊ทธ๋ ์ง ์์ผ๋ฉด ๋ฐํ์ ์ค๋ฅ๊ฐ ์๋ ์ปดํ์ผ ์ค๋ฅ๊ฐ ๋ฐ์ํฉ๋๋ค.
satisfies
์ฐ์ฐ์
satisfies
์ฐ์ฐ์๋ ํ์
์ฃผ์๊ณผ ํ์
๋จ์ธ์ ์ฅ์ ์ ๊ฒฐํฉํ๋ฉด์ ๋จ์ ์ ํผํฉ๋๋ค. ๊ฐ์ ํ์
์ ํ์ฅํ์ง ์๊ณ ํ์
์ ์ฝ์ ๊ฐ์ ํ์ฌ ํ์
์ค์ ์ฌ๋ถ๋ฅผ ๋ ์ ๋ฐํ๊ณ ์์ ํ๊ฒ ํ์ธํ ์ ์์ต๋๋ค.
interface Event {
type: string;
payload: any;
}
const myEvent = {
type: "user_created",
payload: { userId: 123, username: "john.doe" },
} satisfies Event;
console.log(myEvent.payload.userId); // number - ์ฌ์ ํ ์ฌ์ฉ ๊ฐ๋ฅ.
์ด ์์ ์์ satisfies
์ฐ์ฐ์๋ myEvent
๊ฐ์ฒด๊ฐ Event
์ธํฐํ์ด์ค๋ฅผ ์ค์ํ๋๋ก ๋ณด์ฅํฉ๋๋ค. ๊ทธ๋ฌ๋ myEvent
์ ํ์
์ ํ์ฅํ์ง ์์ผ๋ฏ๋ก, ์ถ๋ก ๋ ํน์ ํ์
์ผ๋ก ์์ฑ(myEvent.payload.userId
๋ฑ)์ ์ ๊ทผํ ์ ์์ต๋๋ค.
๊ณ ๊ธ ์ฌ์ฉ๋ฒ ๋ฐ ๊ณ ๋ ค์ฌํญ
satisfies
์ฐ์ฐ์๋ ๋น๊ต์ ์ฌ์ฉํ๊ธฐ ๊ฐ๋จํ์ง๋ง, ๋ช ๊ฐ์ง ๊ณ ๊ธ ์ฌ์ฉ ์๋๋ฆฌ์ค์ ๊ณ ๋ ค์ฌํญ์ ์ผ๋์ ๋์ด์ผ ํฉ๋๋ค.
1. ์ ๋ค๋ฆญ๊ณผ ๊ฒฐํฉํ๊ธฐ
satisfies
์ฐ์ฐ์๋ ์ ๋ค๋ฆญ๊ณผ ๊ฒฐํฉํ์ฌ ๋ ์ ์ฐํ๊ณ ์ฌ์ฌ์ฉ ๊ฐ๋ฅํ ํ์
์ ์ฝ์ ๋ง๋ค ์ ์์ต๋๋ค.
interface ApiResponse {
success: boolean;
data?: T;
error?: string;
}
function processData(data: any): ApiResponse {
// ๋ฐ์ดํฐ ์ฒ๋ฆฌ ์๋ฎฌ๋ ์ด์
const result = {
success: true,
data: data,
} satisfies ApiResponse;
return result;
}
const userData = { id: 1, name: "Jane Doe" };
const userResponse = processData(userData);
if (userResponse.success) {
console.log(userResponse.data.name); // string
}
์ด ์์ ์์ processData
ํจ์๋ ์ ๋ค๋ฆญ์ ์ฌ์ฉํ์ฌ ApiResponse
์ธํฐํ์ด์ค์ data
์์ฑ ํ์
์ ์ ์ํฉ๋๋ค. satisfies
์ฐ์ฐ์๋ ๋ฐํ๋ ๊ฐ์ด ์ง์ ๋ ์ ๋ค๋ฆญ ํ์
์ผ๋ก ApiResponse
์ธํฐํ์ด์ค๋ฅผ ์ค์ํ๋๋ก ๋ณด์ฅํฉ๋๋ค.
2. ๊ตฌ๋ณ๋ ์ ๋์จ(Discriminated Unions)๊ณผ ํจ๊ป ์ฌ์ฉํ๊ธฐ
satisfies
์ฐ์ฐ์๋ ๊ตฌ๋ณ๋ ์ ๋์จ๊ณผ ํจ๊ป ์์
ํ ๋๋ ์ ์ฉํ ์ ์์ต๋๋ค. ์ด ๊ฒฝ์ฐ ๊ฐ์ด ์ฌ๋ฌ ๊ฐ๋ฅํ ํ์
์ค ํ๋๋ฅผ ์ค์ํ๋์ง ํ์ธํ๊ณ ์ ํ ๋ ์ฌ์ฉ๋ฉ๋๋ค.
type Shape = { kind: "circle"; radius: number } | { kind: "square"; sideLength: number };
const circle = {
kind: "circle",
radius: 5,
} satisfies Shape;
if (circle.kind === "circle") {
console.log(circle.radius); //number
}
์ฌ๊ธฐ์ Shape
ํ์
์ ์ ๋๋ ์ฌ๊ฐํ์ด ๋ ์ ์๋ ๊ตฌ๋ณ๋ ์ ๋์จ์
๋๋ค. satisfies
์ฐ์ฐ์๋ circle
๊ฐ์ฒด๊ฐ Shape
ํ์
์ ์ค์ํ๊ณ kind
์์ฑ์ด ์ฌ๋ฐ๋ฅด๊ฒ "circle"๋ก ์ค์ ๋์๋์ง ํ์ธํฉ๋๋ค.
3. ์ฑ๋ฅ ๊ณ ๋ ค์ฌํญ
satisfies
์ฐ์ฐ์๋ ์ปดํ์ผ ํ์์ ํ์
๊ฒ์ฌ๋ฅผ ์ํํ๋ฏ๋ก ์ผ๋ฐ์ ์ผ๋ก ๋ฐํ์ ์ฑ๋ฅ์ ํฐ ์ํฅ์ ๋ฏธ์น์ง ์์ต๋๋ค. ๊ทธ๋ฌ๋ ๋งค์ฐ ํฌ๊ณ ๋ณต์กํ ๊ฐ์ฒด๋ก ์์
ํ ๋๋ ํ์
๊ฒ์ฌ ๊ณผ์ ์ด ์ฝ๊ฐ ๋ ์ค๋ ๊ฑธ๋ฆด ์ ์์ต๋๋ค. ์ด๋ ์ผ๋ฐ์ ์ผ๋ก ๋งค์ฐ ์ฌ์ํ ๊ณ ๋ ค์ฌํญ์
๋๋ค.
4. ํธํ์ฑ ๋ฐ ๋๊ตฌ
satisfies
์ฐ์ฐ์๋ TypeScript 4.9์ ๋์
๋์์ผ๋ฏ๋ก, ์ด ๊ธฐ๋ฅ์ ์ฌ์ฉํ๋ ค๋ฉด ํธํ๋๋ ๋ฒ์ ์ TypeScript๋ฅผ ์ฌ์ฉํ๊ณ ์๋์ง ํ์ธํด์ผ ํฉ๋๋ค. ๋๋ถ๋ถ์ ์ต์ IDE ๋ฐ ์ฝ๋ ํธ์ง๊ธฐ๋ TypeScript 4.9 ์ด์์ ์ง์ํ๋ฉฐ, satisfies
์ฐ์ฐ์์ ๋ํ ์๋ ์์ฑ ๋ฐ ์ค๋ฅ ๊ฒ์ฌ ๊ฐ์ ๊ธฐ๋ฅ๋ ํฌํจํฉ๋๋ค.
์ค์ ์์ ๋ฐ ์ฌ๋ก ์ฐ๊ตฌ
satisfies
์ฐ์ฐ์์ ์ด์ ์ ๋ ์ ์ค๋ช
ํ๊ธฐ ์ํด ๋ช ๊ฐ์ง ์ค์ ์์ ์ ์ฌ๋ก ์ฐ๊ตฌ๋ฅผ ์ดํด๋ณด๊ฒ ์ต๋๋ค.
1. ์ค์ ๊ด๋ฆฌ ์์คํ ๊ตฌ์ถ
ํ ๋๊ธฐ์
์ ๊ด๋ฆฌ์๊ฐ ์ ํ๋ฆฌ์ผ์ด์
์ค์ ์ ์ ์ํ๊ณ ๊ด๋ฆฌํ ์ ์๋ ์ค์ ๊ด๋ฆฌ ์์คํ
์ ๊ตฌ์ถํ๊ธฐ ์ํด TypeScript๋ฅผ ์ฌ์ฉํฉ๋๋ค. ์ค์ ์ JSON ๊ฐ์ฒด๋ก ์ ์ฅ๋๋ฉฐ ์ ์ฉ๋๊ธฐ ์ ์ ์คํค๋ง์ ๋ํด ๊ฒ์ฆ๋์ด์ผ ํฉ๋๋ค. satisfies
์ฐ์ฐ์๋ ์ค์ ์ด ํ์
์ ๋ณด๋ฅผ ์์ง ์๊ณ ์คํค๋ง๋ฅผ ์ค์ํ๋๋ก ๋ณด์ฅํ์ฌ ๊ด๋ฆฌ์๊ฐ ์ค์ ๊ฐ์ ์ฝ๊ฒ ์ ๊ทผํ๊ณ ์์ ํ ์ ์๊ฒ ํฉ๋๋ค.
2. ๋ฐ์ดํฐ ์๊ฐํ ๋ผ์ด๋ธ๋ฌ๋ฆฌ ๊ฐ๋ฐ
ํ ์ํํธ์จ์ด ํ์ฌ๋ ๊ฐ๋ฐ์๊ฐ ์ํธ์์ฉํ ์ฐจํธ์ ๊ทธ๋ํ๋ฅผ ๋ง๋ค ์ ์๋ ๋ฐ์ดํฐ ์๊ฐํ ๋ผ์ด๋ธ๋ฌ๋ฆฌ๋ฅผ ๊ฐ๋ฐํฉ๋๋ค. ์ด ๋ผ์ด๋ธ๋ฌ๋ฆฌ๋ TypeScript๋ฅผ ์ฌ์ฉํ์ฌ ๋ฐ์ดํฐ ๊ตฌ์กฐ์ ์ฐจํธ์ ์ค์ ์ต์
์ ์ ์ํฉ๋๋ค. satisfies
์ฐ์ฐ์๋ ๋ฐ์ดํฐ ๋ฐ ์ค์ ๊ฐ์ฒด๋ฅผ ๊ฒ์ฆํ์ฌ ์์๋๋ ํ์
์ ์ค์ํ๊ณ ์ฐจํธ๊ฐ ์ฌ๋ฐ๋ฅด๊ฒ ๋ ๋๋ง๋๋๋ก ๋ณด์ฅํ๋ ๋ฐ ์ฌ์ฉ๋ฉ๋๋ค.
3. ๋ง์ดํฌ๋ก์๋น์ค ์ํคํ ์ฒ ๊ตฌํ
ํ ๋ค๊ตญ์ ๊ธฐ์
์ TypeScript๋ฅผ ์ฌ์ฉํ์ฌ ๋ง์ดํฌ๋ก์๋น์ค ์ํคํ
์ฒ๋ฅผ ๊ตฌํํฉ๋๋ค. ๊ฐ ๋ง์ดํฌ๋ก์๋น์ค๋ ํน์ ํ์์ผ๋ก ๋ฐ์ดํฐ๋ฅผ ๋ฐํํ๋ API๋ฅผ ๋
ธ์ถํฉ๋๋ค. satisfies
์ฐ์ฐ์๋ API ์๋ต์ ๊ฒ์ฆํ์ฌ ์์๋๋ ํ์
์ ์ค์ํ๊ณ ํด๋ผ์ด์ธํธ ์ ํ๋ฆฌ์ผ์ด์
์ด ๋ฐ์ดํฐ๋ฅผ ์ฌ๋ฐ๋ฅด๊ฒ ์ฒ๋ฆฌํ ์ ์๋๋ก ๋ณด์ฅํ๋ ๋ฐ ์ฌ์ฉ๋ฉ๋๋ค.
satisfies
์ฐ์ฐ์ ์ฌ์ฉ์ ์ํ ๋ชจ๋ฒ ์ฌ๋ก
satisfies
์ฐ์ฐ์๋ฅผ ํจ๊ณผ์ ์ผ๋ก ์ฌ์ฉํ๋ ค๋ฉด ๋ค์ ๋ชจ๋ฒ ์ฌ๋ก๋ฅผ ๊ณ ๋ คํ์ญ์์ค:
- ๊ฐ์ ํ์ ์ ํ์ฅํ์ง ์๊ณ ํ์ ์ ์ฝ์ ๊ฐ์ ํ๊ณ ์ถ์ ๋ ์ฌ์ฉํ์ญ์์ค.
- ์ ๋ค๋ฆญ๊ณผ ๊ฒฐํฉํ์ฌ ๋ ์ ์ฐํ๊ณ ์ฌ์ฌ์ฉ ๊ฐ๋ฅํ ํ์ ์ ์ฝ์ ๋ง๋์ญ์์ค.
- ๋งคํ๋ ํ์ ๋ฐ ์ ํธ๋ฆฌํฐ ํ์ ๊ณผ ํจ๊ป ์์ ํ ๋ ์ฌ์ฉํ์ฌ, ๊ฒฐ๊ณผ ๊ฐ์ด ํน์ ์ ์ฝ์ ์ค์ํ๋๋ก ๋ณด์ฅํ๋ฉด์ ํ์ ์ ๋ณํํ์ญ์์ค.
- ์ค์ ๊ฐ์ฒด, API ์๋ต ๋ฐ ๊ธฐํ ๋ฐ์ดํฐ ๊ตฌ์กฐ๋ฅผ ๊ฒ์ฆํ๋ ๋ฐ ์ฌ์ฉํ์ญ์์ค.
satisfies
์ฐ์ฐ์๊ฐ ์ฌ๋ฐ๋ฅด๊ฒ ์๋ํ๋๋ก ํ์ ์ ์๋ฅผ ์ต์ ์ํ๋ก ์ ์งํ์ญ์์ค.- ํ์ ๊ด๋ จ ์ค๋ฅ๋ฅผ ์ก๊ธฐ ์ํด ์ฝ๋๋ฅผ ์ฒ ์ ํ ํ ์คํธํ์ญ์์ค.
๊ฒฐ๋ก
satisfies
์ฐ์ฐ์๋ TypeScript์ ํ์
์์คํ
์ ๊ฐ๋ ฅํ ์ถ๊ฐ ๊ธฐ๋ฅ์ผ๋ก, ํ์
์ ์ฝ ๊ฒ์ฌ์ ๋ํ ๋
ํนํ ์ ๊ทผ ๋ฐฉ์์ ์ ๊ณตํฉ๋๋ค. ์ด๋ฅผ ํตํด ๊ฐ์ ํ์
์ถ๋ก ์ ์ํฅ์ ์ฃผ์ง ์์ผ๋ฉด์ ํน์ ํ์
์ ์ค์ํ๋์ง ํ์ธํ ์ ์์ด, ํ์
์ค์ ์ฌ๋ถ๋ฅผ ๋ ์ ๋ฐํ๊ณ ์์ ํ๊ฒ ํ์ธํ ์ ์์ต๋๋ค.
satisfies
์ฐ์ฐ์์ ๊ธฐ๋ฅ, ์ฌ์ฉ ์ฌ๋ก ๋ฐ ์ด์ ์ ์ดํดํจ์ผ๋ก์จ TypeScript ์ฝ๋์ ํ์ง๊ณผ ์ ์ง๋ณด์์ฑ์ ํฅ์์ํค๊ณ ๋ ๊ฒฌ๊ณ ํ๊ณ ์ ๋ขฐํ ์ ์๋ ์ ํ๋ฆฌ์ผ์ด์
์ ๊ตฌ์ถํ ์ ์์ต๋๋ค. TypeScript๊ฐ ๊ณ์ ๋ฐ์ ํจ์ ๋ฐ๋ผ satisfies
์ฐ์ฐ์์ ๊ฐ์ ์๋ก์ด ๊ธฐ๋ฅ์ ํ์ํ๊ณ ์ฑํํ๋ ๊ฒ์ ์๋์ ์์๋๊ฐ๊ณ ์ธ์ด์ ์ ์ฌ๋ ฅ์ ์ต๋ํ ํ์ฉํ๋ ๋ฐ ์ค์ํ ๊ฒ์
๋๋ค.
์ค๋๋ ์ ๊ธ๋ก๋ฒํ๋ ์ํํธ์จ์ด ๊ฐ๋ฐ ํ๊ฒฝ์์ ํ์
์ ์์ ํ๊ณ ์ ์ง๋ณด์ ๊ฐ๋ฅํ ์ฝ๋๋ฅผ ์์ฑํ๋ ๊ฒ์ ๋งค์ฐ ์ค์ํฉ๋๋ค. TypeScript์ satisfies
์ฐ์ฐ์๋ ์ด๋ฌํ ๋ชฉํ๋ฅผ ๋ฌ์ฑํ๊ธฐ ์ํ ๊ท์คํ ๋๊ตฌ๋ฅผ ์ ๊ณตํ์ฌ ์ ์ธ๊ณ ๊ฐ๋ฐ์๋ค์ด ํ๋ ์ํํธ์จ์ด์ ๋์์์ด ์ฆ๊ฐํ๋ ์๊ตฌ ์ฌํญ์ ์ถฉ์กฑํ๋ ๊ณ ํ์ง ์ ํ๋ฆฌ์ผ์ด์
์ ๊ตฌ์ถํ ์ ์๋๋ก ํฉ๋๋ค.
satisfies
์ฐ์ฐ์๋ฅผ ๋ฐ์๋ค์ด๊ณ TypeScript ํ๋ก์ ํธ์์ ์๋ก์ด ์ฐจ์์ ํ์
์์ ์ฑ๊ณผ ์ ๋ฐ์ฑ์ ๊ฒฝํํด ๋ณด์ธ์.